<template>

    <div class="date-picker">
        <!-- 日期选择容器 -->
        <van-cell-group inset>
            <div class="date-container" @click="showCalendar = true">
                <!-- 入住日期 -->
                <van-cell title="入住" class="date-item" :title-style="{ color: '#969799', flex: 'none' }">
                    <template #value>
                        <div class="date-content">
                            <div class="week">{{ checkInWeek }}</div>
                            <div class="date">{{ checkInDateStr }}</div>
                        </div>
                    </template>
                </van-cell>

                <!-- 分割线 -->
                <div class="divider"></div>

                <!-- 离店日期 -->
                <van-cell title="离店" class="date-item" :title-style="{ color: '#969799', flex: 'none' }">
                    <template #value>
                        <div class="date-content">
                            <div class="week">{{ checkOutWeek }}</div>
                            <div class="date">{{ checkOutDateStr }}</div>
                        </div>
                    </template>
                </van-cell>
            </div>
        </van-cell-group>

        <!-- 日期选择器 -->
        <van-calendar v-model:show="showCalendar" type="range" :min-date="minDate" :max-date="maxDate"
            @confirm="onConfirmDate" />

        <!-- 住宿时长 -->
        <van-divider class="duration">共{{ duration }}晚</van-divider>
    </div>

    <!-- 房型列表 -->
    <van-cell v-for="(room, index) in roomList" :key="index">
        <div class="room-item">
            <img :src="room.image" class="room-image" />
            <div class="room-info">
                <div class="title">{{ room.name }}</div>
                <div class="price">最低价<span class="price-number">{{ room.price }}</span>元</div>
            </div>
            <van-button type="primary" size="small" class="detail-btn" @click="jumpto(room.id)">订</van-button>
        </div>
    </van-cell>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Cell, Divider, Tag, Button } from 'vant';
import axios from 'axios';
import router from '@/router';
import { computed } from 'vue';
import { Calendar } from 'vant';
import {getroomtype}from '@/api/Index'
const minDate = new Date(2024, 2, 1); // 可选最小日期（注意月份从0开始）
const maxDate = new Date(2025, 11, 31); // 可选最大日期

// 响应式数据
const showCalendar = ref(false);
const checkInDate = ref(new Date()); // 默认今天
const checkOutDate = ref(new Date(Date.now() + 86400000)); // 默认明天

// 日期格式化函数
const formatDate = (date) => {
    return {
        month: date.getMonth() + 1,
        day: date.getDate(),
        week: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
    };
};

// 计算属性
const checkInDateStr = computed(() => {
    const { month, day } = formatDate(checkInDate.value);
    return `${month}月${day}日`;
});

const checkInWeek = computed(() => {
    return `周${formatDate(checkInDate.value).week}`;
});

const checkOutDateStr = computed(() => {
    const { month, day } = formatDate(checkOutDate.value);
    return `${month}月${day}日`;
});

const checkOutWeek = computed(() => {
    return `周${formatDate(checkOutDate.value).week}`;
});

// 计算住宿天数
const duration = computed(() => {
    
    const diff = checkOutDate.value - checkInDate.value;
    return Math.floor(diff / 86400000); // 1天 = 86400000毫秒

});

// 日期确认回调
const onConfirmDate = (values) => {
    const [start, end] = values;
    checkInDate.value = start;
    checkOutDate.value = end;
    showCalendar.value = false;
};
// 房型数据
// 改为响应式空数组
const roomList = reactive([]);

const getRoomType = () => {
    getroomtype().then(res => {

            // 清空原有数据
            roomList.splice(0, roomList.length);

            // 动态添加新数据（假设接口返回数组结构）
            res.data.forEach(item => {
                roomList.push({
                    id: item.id,
                    image: item.roomTypeImg,      // 根据接口字段调整
                    name: item.roomTypeName,   // 根据接口字段调整
                    price: item.roomTypePrice,
                    tag: item.promotionTag || ''
                });
            });

        })

}
onMounted(() => {
    getRoomType()
})
const jumpto = (id) => {
    router.push({
        name: 'OrderDetails',
        query: {
            id: id,
            diff:duration.value,
            checkInDate:checkInDateStr.value,
            checkOutDate:checkOutDateStr.value
        }
    })
}
</script>

<style scoped>
.page-container {
    background: #f7f8fa;
    min-height: 100vh;
}

.room-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
}

.room-image {
    width: 100px;
    height: 80px;
    border-radius: 4px;
    margin-right: 12px;
}

.room-info {
    flex: 1;
    min-width: 0;
}

.title {
    font-size: 16px;
    color: #323233;
    margin-bottom: 6px;
}

.desc {
    font-size: 12px;
    color: #969799;
    margin-bottom: 8px;
}

.price {
    font-size: 12px;
    color: #ff4444;
}

.price-number {
    font-size: 18px;
    font-weight: bold;
    margin: 0 2px;
}

.detail-btn {
    width: 60px;
    margin-left: 10px;
}

.van-tag {
    margin-left: 6px;
    vertical-align: text-top;
}

.date-picker {
    margin: 16px;
}

.date-container {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 8px;
}

.date-item {
    flex: 1;
    background: transparent;

    :deep(.van-cell__value) {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}

.date-content {
    text-align: center;

    .week {
        font-size: 12px;
        color: #323233;
    }

    .date {
        font-size: 14px;
        color: #1989fa;
        font-weight: 500;
        margin-top: 4px;
    }
}

.divider {
    width: 1px;
    height: 32px;
    background: #ebedf0;
}

.duration {
    color: #969799;
    font-size: 12px;
    margin: 8px 0;
    border-color: #ebedf0;

    &::before,
    &::after {
        border-color: inherit;
    }
}

.date-picker {
    margin: 16px;
}

.date-container {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 8px;
}

.date-item {
    flex: 1;
    background: transparent;
}

.date-content {
    text-align: center;
}

.week {
    font-size: 12px;
    color: #323233;
}

.date {
    font-size: 14px;
    color: #1989fa;
    font-weight: 500;
    margin-top: 4px;
}

.divider {
    width: 1px;
    height: 32px;
    background: #ebedf0;
}

.duration {
    color: #969799;
    font-size: 12px;
    margin: 8px 0;
    border-color: #ebedf0;
}
</style>